<template>
  <div class="box">
    <div class="imgUpLoad">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 300px;
          font-weight: 700;
        "
      >
        <div
          style="
            font-size: 30px;
            border-bottom: 5px solid #42a5ff;
            color: #42a5ff;
            margin-right: 20px;
          "
        >
          Step1
        </div>
        <div style="font-size: 24px">上传改款鞋图片</div>
      </div>
      <input id="getimg" type="file" @change="handleFileChange" />
      <div class="chooseimg" v-if="img1">
        <img :src="img1" alt="" />
        <div style="font-size: 15px" class="changeagain" @click="choose">
          重新选择图片
        </div>
      </div>

      <div v-else class="tochoose" @click="choose">
        <i
          class="iconfont icontupianshangchuan"
          style="color: #fff; font-size: 40px; margin: auto"
        />
      </div>

      <div class="scale">
        <span class="tip">融合比例</span>
        <span><el-slider v-model="value1" :step="10" /></span>
      </div>

      <!-- <div class="changeSettle" @click="changeSettle">
                互换位置⬆⬇
            </div> -->

      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 300px;
          font-weight: 700;
          margin-top: 30px;
        "
      >
        <div
          style="
            font-size: 30px;
            border-bottom: 5px solid #42a5ff;
            color: #42a5ff;
            margin-right: 20px;
          "
        >
          Step2
        </div>
        <div style="font-size: 24px">上传参考鞋图片</div>
      </div>
      <input id="getimg2" type="file" @change="handleFileChange2" />
      <div class="chooseimg" v-if="img2">
        <img :src="img2" alt="" />
        <div style="font-size: 15px" class="changeagain" @click="choose2">
          重新选择图片
        </div>
      </div>

      <div v-else class="tochoose" @click="choose2">
        <i
          class="iconfont icontupianshangchuan"
          style="color: #fff; font-size: 40px; margin: auto"
        />
      </div>

      <div class="scale">
        <span class="tip">融合比例</span>
        <div><el-slider v-model="value2" :step="10" /></div>
      </div>
    </div>
    <div class="imgshow">
      <div class="imgshowbox">
        <video
          ref="videoRef"
          v-if="waitvideo"
          style="width: 100%; height: 100%"
          @ended="handleVideoEnded"
        >
          <source src="../../../img/等待生成.mp4" type="video/mp4" />
        </video>
        <div
          style="
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
          "
        >
          <img
            v-if="showimg"
            style="width: 100%; cursor: pointer"
            id="choosingimg"
            :src="imgs[0]"
            alt=""
            @click="() => (imgBig = true)"
          />
        </div>
      </div>
      <div class="imgshowbottom">
        <!-- <div v-if="waitvideo">
          <div v-for="item in imgcount" :key="item" style="width: 140px">
            正在生成图片
          </div>
        </div> -->
        <div v-if="showimg">
          <div
            style="cursor: pointer"
            v-for="(item, index) in imgs"
            :key="item"
          >
            <img
              :src="item"
              alt=""
              height="80px"
              @click="chooseimg(item, index)"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="imgbig" v-if="imgBig">
      <div @click="() => (imgBig = false)">
        <el-icon style="color: white; font-size: 40px">
          <Close />
        </el-icon>
      </div>
      <img :src="imgs[i]" alt="" />
    </div>

    <div class="tools">
      <div class="tool35">
        场景选择
        <el-scrollbar style="margin-top: 20px">
          <div
            style="
              display: flex;
              justify-content: start;
              flex-wrap: wrap;
              gap: 10px;
            "
          >
            <div
              v-for="i in sceneList"
              :key="i"
              style="width: 77px; cursor: pointer; border-radius: 5px"
              @click="
                () => {
                  scene = i.name;
                  useSlectScene = !useSlectScene;
                }
              "
            >
              <img
                :src="i.url"
                width="77px"
                height="77px"
                style="
                  border-radius: 5px;
                  border: 2px solid #141414;
                  box-sizing: border-box;
                "
                :class="scene == i.name ? 'scene-active' : ''"
              />
              <div
                style="text-align: center; font-size: 18px; line-height: 15px"
              >
                {{ i.name }}
              </div>
            </div>
          </div>
        </el-scrollbar>
        <!-- <div
          style="
            width: 300px;
            margin: 5px 10px;
            padding: 5px;
            background-color: #141414;
            font-size: 25px;
            border-radius: 5px;
            cursor: pointer;
          "
          @click="() => (useSlectScene = !useSlectScene)"
        >
          <span :style="{ color: scene == '场景' ? '#c9c9c9' : 'white' }">{{
            scene
          }}</span>
        </div> -->

        <!-- <div
          v-if="useSlectScene"
          style="
            width: 260px;
            height: 330px;
            padding: 5px;
            border-radius: 8px;
            background-color: #4f4b5e;
            position: absolute;
            top: 80px;
            left: 15px;
            z-index: 100;
          "
        >
          <el-scrollbar>
            <div
              style="
                display: flex;
                justify-content: start;
                flex-wrap: wrap;
                align-content: start;
              "
            >
              <div
                v-for="i in sceneList"
                :key="i"
                style="width: 65px; margin: 10px; cursor: pointer"
                @click="
                  () => {
                    scene = i.name;
                    useSlectScene = !useSlectScene;
                  }
                "
              >
                <img :src="i.url" width="65px" />
                <div style="text-align: center">{{ i.name }}</div>
              </div>
            </div>
          </el-scrollbar>
        </div> -->
      </div>

      <div class="tool3">
        画面质量
        <el-radio-group v-model="radio" style="margin-top: 10px">
          <el-radio value="1" size="large"
            ><span style="color: white">普通</span></el-radio
          >
          <el-radio value="2" size="large"
            ><span style="color: white">高清</span></el-radio
          >
          <el-radio value="3" size="large"
            ><span style="color: white">超清</span></el-radio
          >
        </el-radio-group>
      </div>

      <div class="tool4">
        图片张数
        <div style="margin-top: 10px">
          <el-radio-group v-model="imgcount">
            <el-radio value="2" border>2张</el-radio>
            <el-radio value="4" border>4张</el-radio>
          </el-radio-group>
        </div>
      </div>

      <el-button type="info" @click="submit" class="btn">生成新款</el-button>
    </div>
  </div>
</template>

<script setup>
import { Close } from "@element-plus/icons-vue";
import { nextTick, ref, watch } from "vue";

//视频对象
const videoRef = ref(null);

const imgBig = ref(false);

const radio = ref("2");

//左侧图片上传
const img1 = ref("");
const value1 = ref(50);
const img2 = ref("");
const value2 = ref(50);

watch(value2, (new2) => {
  value1.value = 100 - new2;
});
watch(value1, (new1) => {
  value2.value = 100 - new1;
});

//选中的图片张数
const imgcount = ref("2");
//控制是否展示视频
const waitvideo = ref(false);

//控制视频播放完毕展示图片
const showimg = ref(false);

//中间的图片
const imgs = ref([]);

//正在看的图片
const i = ref(0);

//场景
const scene = ref("场景");
// //是否选了场景
// const hasScen = ref(false)
//用户正在选择场景
const useSlectScene = ref(false);
//用户可以选择的场景
const sceneList = ref([
  {
    url: "https://ossimg.valimart.net/uploads/20230612/mBqomlMbylgEVSMIsUDk0daJt2PAbJLHxEgQ5YX1.png?x-oss-process=image%2Fresize%2Cm_fill%2Cw_100%2Fquality%2CQ_80",
    name: "纯色背景",
  },
  {
    url: "https://ossimg.valimart.net/uploads/20230612/ezrsuiktweCFMd2RSAsHdHHkcmZNmYM1dxjRZmkA.png?x-oss-process=image%2Fresize%2Cm_fill%2Cw_100%2Fquality%2CQ_80",
    name: "上脚图",
  },
  {
    url: "https://ossimg.valimart.net/uploads/20230612/t7IMSzF5tOpKVRiWqqXAgQqNlxeFXCZjRdPjcJl4.png?x-oss-process=image%2Fresize%2Cm_fill%2Cw_100%2Fquality%2CQ_80",
    name: "草坪",
  },
  {
    url: "https://ossimg.valimart.net/uploads/20230612/eOghjjlcwoMqUjmOzcsAyHMg7NBi7AsJ9atL5nOw.png?x-oss-process=image%2Fresize%2Cm_fill%2Cw_100%2Fquality%2CQ_80",
    name: "户外",
  },
  {
    url: "https://ossimg.valimart.net/uploads/20230612/QmcQgIEcG8cDiVwB4IPFtHIQni8lQwzhXA7TxHPc.png?x-oss-process=image%2Fresize%2Cm_fill%2Cw_100%2Fquality%2CQ_80",
    name: "街景",
  },
  {
    url: "https://ossimg.valimart.net/uploads/20230815/kkKz14GRs3p4D5NWNlp32kVg4e4uDas2Xl92ADeE.png?x-oss-process=image%2Fresize%2Cm_fill%2Cw_100%2Fquality%2CQ_80",
    name: "街头风格",
  },
  {
    url: "https://ossimg.valimart.net/uploads/20230612/7iBTDpiQ3uJOgFumZ1ZNfKXGdLwkugG7xqnfGMAw.png?x-oss-process=image%2Fresize%2Cm_fill%2Cw_100%2Fquality%2CQ_80",
    name: "广告",
  },
  {
    url: "https://ossimg.valimart.net/uploads/20230612/mAEjxZPcojxOHfV40ZRA7MI9k3h0T2DBWkp8QRLC.png?x-oss-process=image%2Fresize%2Cm_fill%2Cw_100%2Fquality%2CQ_80",
    name: "雪地",
  },
  {
    url: "https://ossimg.valimart.net/uploads/20230815/KKka2anTaCEA0gdyvtZzCSSFkZzMUDhFezAW3pcs.png?x-oss-process=image%2Fresize%2Cm_fill%2Cw_100%2Fquality%2CQ_80",
    name: "红毯",
  },
  {
    url: "https://ossimg.valimart.net/uploads/20230815/x2RfuQReSa7jLFy4IcKWTcgRb2hIHA7JTfRfdCb5.png?x-oss-process=image%2Fresize%2Cm_fill%2Cw_100%2Fquality%2CQ_80",
    name: "森林",
  },
]);

const choose = () => {
  console.log("choose");
  document.getElementById("getimg").click();
};

const choose2 = () => {
  console.log("choose");
  document.getElementById("getimg2").click();
};

const handleFileChange = (e) => {
  if (e.target.files[0] == null) {
    return;
  }

  console.log(e.target.files[0]);
  img1.value = URL.createObjectURL(e.target.files[0]);
};

const handleFileChange2 = (e) => {
  if (e.target.files[0] == null) {
    return;
  }

  console.log(e.target.files[0]);
  img2.value = URL.createObjectURL(e.target.files[0]);
};

const changeSettle = () => {
  let t = img1.value;
  img1.value = img2.value;
  img2.value = t;
};

const submit = () => {
  i.value = 0;
  imgs.value.length = 0;
  showimg.value = false;
  waitvideo.value = true;

  nextTick(() => {
    let v = document.getElementsByTagName("video");
    v?.[0]?.play();
  });

  if (value1.value != 50) {
    setTimeout(() => {
      videoRef.value.dispatchEvent(new Event("ended"));
    }, 10000);
  }
};

const handleVideoEnded = () => {
  waitvideo.value = false;
  for (let i = 0; i < imgcount.value; i++) {
    let file;
    if (value1.value != 50) {
      file = require("../../../img/多图融合/修改参数生成" + (i + 1) + ".png");
    } else {
      file = require("../../../img/多图融合/直接生成" + (i + 1) + ".png");
    }
    imgs.value.push(file);
  }
  showimg.value = true;
};

const chooseimg = (url, index) => {
  document.getElementById("choosingimg").setAttribute("src", url);
  i.value = index;
  console.log(url);
};
</script>

<style scoped lang="scss">
* {
  font-size: 24px;
  font-weight: 600;
}

input {
  visibility: hidden;
  /* opacity:0; */
  position: absolute;
  left: 100px;
  top: 210px;
}

.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: start;
  padding: 20px 0;
  box-sizing: border-box;
  .common {
    // background-color: #504656;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
  }

  .imgUpLoad {
    @extend .common;
    width: 300px;
    margin: 0 10px;
    align-items: center;

    h1 {
      color: white;
    }

    .chooseimg {
      width: 180px;
      height: 180px;
      position: relative;
      margin: 30px 0;

      img {
        width: 100%;
        height: 100%;
      }

      .changeagain {
        bottom: 0;
        width: 100%;
        opacity: 0.6;
        background-color: black;
        position: absolute;
        color: white;
        cursor: pointer;
        padding: 5px 0;
        text-align: center;
      }
    }

    .tochoose {
      position: relative;
      cursor: pointer;
      width: 180px;
      height: 180px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #141414;
      border-radius: 5px;
      margin: 30px 0;
    }

    .scale {
      color: white;
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px; //   flex-direction: column;
      .tip {
        margin-left: 10px;
        line-height: 32px;
        font-size: 20px;
        // background: linear-gradient(135deg, #2fb0ff, #b863fb);
      }

      .el-slider {
        // margin-left: 10px;
        width: 200px;
      }

      :deep .el-slider__bar {
        background: linear-gradient(135deg, #2fb0ff, #b863fb);
      }

      :deep .el-slider__button {
        border-color: #b863fb;
      }
    }

    .changeSettle {
      color: white;
      margin: 10px 0;
      padding: 10px 30px;
      background-color: rgb(64, 59, 72);
      border-radius: 5px;
      user-select: none;
      cursor: pointer;

      &:hover {
        background-color: rgb(88, 89, 100);
      }

      &:active {
        background-color: rgb(116, 117, 131);
      }
    }
  }

  .imgshow {
    @extend .common;
    flex: 1;
    margin-right: 10px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;

    .imgshowbox {
      box-sizing: border-box;
      width: 100%;
      height: 0;
      flex: 1;
      padding: 10px;
      background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center;

      border: {
        style: solid;
        width: 2px;
        color: #979797;
        radius: 10px;
      }
    }

    .imgshowbottom {
      height: 80px;
      div {
        display: flex;
        justify-content: center;
        align-items: center;

        div {
          margin: 10px 30px;
          width: 80px;
          height: 80px;
          background-color: rgb(80, 50, 116);
          font-size: 23px;
          color: white;
          padding: auto;

          img {
            cursor: pointer;
          }
        }
      }
    }
  }

  .tools {
    @extend .common;
    width: 360px;
    justify-content: flex-start;
    color: white;
    font-weight: 800;
    padding: 0 20px;

    > div {
      //   background-color: #141414;
      width: 100%;
      padding: 10px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }

    .tool3 {
      background-color: #141414;
      border-radius: 8px;
      margin-bottom: 20px;
      div {
        display: block;
        margin: 0;
        padding: 0;
      }
    }

    .tool35 {
      position: relative;
      background-color: #141414;
      border-radius: 8px;
      margin-bottom: 20px;
      .scene-active {
        border: 2px solid #42a5ff !important;
      }
    }

    .tool4 {
      background-color: #141414;
      border-radius: 8px;
      margin-bottom: 20px;
      div {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin: 0;

        .el-tag {
          width: 60px;
          height: 30px;
        }
      }
    }

    :deep .el-radio__label {
      color: white;
      span {
        font-size: 18px !important;
      }
    }

    :deep .el-radio__input.is-checked .el-radio__inner {
      background: #42a5ff;
      border-color: #42a5ff;
    }

    :deep .el-radio.is-bordered.is-checked {
      border-color: #42a5ff;
    }

    :deep .el-radio__input.is-checked + .el-radio__label {
      color: #42a5ff;
    }
  }
}

.hidden {
  visibility: hidden;
}

.imgbig {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;

  div {
    position: fixed;
    top: 20px;
    /* 调整关闭按钮的位置 */
    right: 40px;
  }

  img {
    max-width: 90%;
    /* 确保图片响应式调整 */
    max-height: 90%;
    object-fit: contain;
    /* 保持图片比例 */
  }
}

.btn {
  background: linear-gradient(135deg, #2fb0ff, #b863fb);
  font-size: 24px;
  font-weight: 600;
  padding: 20px 0;
  border: none;
}
</style>